<template>
  <div class="list">
    <ContentLayout>
      <div slot="left">
        <div class="left-title">
          动态信息
        </div>
        <ul>
          <li
            v-for="(item, index) in list"
            :key="item.id"
            @click="change(index)"
            :class="{active:index == current}"
          >
            <p>{{item.title}}</p>
            <span>&gt;&gt;</span>
          </li>
        </ul>
      </div>
      <div slot="right">
        <div class="message">
          <div class="title">公告通知</div>
            <ul
              v-for="(item_body, index) in tatal"
              :key="item_body.index"
              :class="{activeText:index == current}"
            >
              <li
                v-for="item in item_body"
                :key="item.id"
              >
                <p>{{item.title}}</p>
                <span>{{item.create_time}}</span>
              </li>
            </ul>
        </div>
      </div>
    </ContentLayout>
  </div>
</template>

<script>
import { getNotice, getNotification, getWork, getDataInfo, getMessageInfo } from '@/api/home'
const ContentLayout = () => import('../../components/content-layout')

export default {
  name: 'List',
  components: {
    ContentLayout
  },
  data () {
    return {
      list: [
        { title: '公告通知' },
        { title: '安全通报' },
        { title: '重点工作' },
        { title: '工务文电资料' },
        { title: '工务部文电' }
      ],
      current: 0,
      tatal: []
    }
  },
  methods: {
    change (index) {
      this.current = index
      console.log(index, this.current)
    }
  },
  async created () {
    this.tatal.push((await getNotification()).data.data)
    this.tatal.push((await getNotice()).data.data)
    this.tatal.push((await getWork()).data.data)
    this.tatal.push((await getDataInfo()).data.data)
    this.tatal.push((await getMessageInfo()).data.data)
    console.log(this.tatal)
  }
}
</script>

<style lang="scss" scoped src="./list.scss">
</style>
